<template>
    <header>
        <van-nav-bar title="登录" left-text="返回首页" left-arrow @click-left="onClickLeft" />
    </header>

    <van-notice-bar mode="link" left-icon="volume-o" :scrollable="false" @click="onClick">
        <van-swipe vertical class="notice-swipe" :autoplay="3000" :touchable="false" :show-indicators="false">
            <van-swipe-item>还没有账号？去注册</van-swipe-item>
            <van-swipe-item>还没有账号？去注册</van-swipe-item>
        </van-swipe>
    </van-notice-bar>
    <div class="login">
        <form>
            <van-cell-group inset>
                <van-field v-model="tel" name="手机号" label="手机号" placeholder="手机号" autocomplete="userphone" />
                <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                    autocomplete="current-password" />
            </van-cell-group>

            <div style="margin: 16px;">
                <van-button round block type="primary" @click="loginIn">
                    登录
                </van-button>
            </div>
        </form>

        <div class="ways">
            <van-divider>同意协议并选择其他登录方式</van-divider>
            <div>
                <van-icon name="qq" color="#4a90e2" size="50px" />
                <van-icon name="wechat" color="#4a90e2" size="50px" />
            </div>
        </div>



        <div class="xieyi">
            <input type="checkbox" v-model="checked">
            <div>
                <span>我已阅读并同意</span><a href="https://in.m.jd.com/help/app/register_info.html">《京东用户服务协议》</a>
                <a href="https://in.m.jd.com/help/app/private_policy.html">《用户隐私政策》</a>
                <span>，未注册的手机号将自动创建京东账号</span>
            </div>
        </div>


        <!-- 浮动气泡 -->
        <van-floating-bubble icon="chat" @click="onClick" />
    </div>
</template>

<script>
import { doLogin } from '@/apis/user';
import { showToast } from 'vant';
export default {
    data() {
        return {
            tel: '',
            password: '',
            checked: false
        }
    },
    created() {
        this.tel = localStorage.getItem('tel', this.tel)
    },
    methods: {
        loginIn() {
            doLogin({
                loginname: this.tel,
                password: this.password
            }).then(res => {
                // console.log(res);
                if (!this.checked) return showToast('请先阅读并同意协议')
                if (res.data.code == '10010') return showToast("该用户不存在")
                if (res.data.code == '10011') return showToast("密码错误")

                //登录成功，把token和userid存入本地
                localStorage.setItem("token", res.data.data.token)
                localStorage.setItem("userid", res.data.data.userid)
                //跳转
                this.$router.push("/home")

            })
        },
        onClickLeft() {
            this.$router.push('/home')
        },
        onClick() {
            showToast('点击气泡');
        },
        onClick() {
            this.$router.push('/register')
        }
    }
}
</script>

<style lang="less" scoped>
.ways {
    height: 200px;

    div {
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.xieyi {
    margin: 20px auto;
    width: 80%;
    display: flex;
    text-align: center;
    font-size: 12px;

    span {
        color: gray;
    }

    a {
        color: #4a90e2;
    }
}

.notice-swipe {
    height: 40px;
    line-height: 40px;
}
</style>